<template>
  <div>
    <div class="w-full flex justify-center items-center text-[12px] stepbox">
      <div class="flex items-center cursor-pointer stepItem" :class="props.step == 1 ? 'active' : ''">
        <div class="circle">1</div>
        <div class="text-[14px] txt">添加方式</div>
      </div>
      <div class="stepItem line">---</div>
      <div class="flex items-center cursor-pointer stepItem" :class="props.step == 2 ? 'active' : ''">
        <div class="circle">2</div>
        <div class="text-[14px] txt">资产信息</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  step: 1 | 2;
}>();
const emit = defineEmits(['getStep']);
</script>

<style lang="scss" scoped>
.stepItem {
  color: #999;
  &.line {
    margin: 0 20px;
  }
  .circle {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #999;
    color: #999;
    margin-right: 5px;
  }
  &.active {
    color: #2a55e5;
    .circle {
      background-color: #2a55e5;
      color: #fff;
      border: 1px solid #2a55e5;
    }
  }
}
</style>
